<template>
    <div class="main">
        <div class="left">
            <logo />
            <Menu :menu="menuList" />
        </div>
        <div class="right">
            <div class="header">
                <div class="nav">
                    <ul>
                        <template v-for="(item, index) in navList">
                            <li :key="item.path" :class="active === item.path ? 'active' : ''" @click="changeMenu(index)">
                                <router-link :to="item.path">
                                    <span class="iconfont" :class="item.icon"></span><b>{{ item.name }}</b>
                                </router-link>
                            </li>
                        </template>
                    </ul>
                </div>
                <div class="userBox">
                    <div>
                        <el-avatar :size="40" :src="require('@/static/img/avatar.jpg')"></el-avatar>
                    </div>
                    <div>用户：admin</div>
                    <div class="SignOut">
                        <span class="iconfont icon-tuichu"></span> 退出
                    </div>
                </div>
            </div>
            <div class="tbody">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Logo from '@/components/Logo'
import Menu from '@/components/Menu'
import navList from '@/assets/js/navListNew'
export default {
    name: 'Main',
    components: {
        Menu,
        Logo
    },
    data () {
        return {
            navNum: 1,
            active: '/main',
            navList: navList,
            menuList: ''
        }
    },
    mounted () {
        this.active = this.$route.path
        const navNum = localStorage.getItem('navNum')
        this.navNum = Number(navNum)
        this.menuList = this.navNum ? navList[this.navNum].children : navList[1].children
    },
    methods: {
        changeMenu: function (index) {
            localStorage.setItem('navNum', index)
            this.active = navList[index].path
            if (index === 0 || index === 1) {
                this.menuList = navList[1].children
            } else {
                this.menuList = navList[index].children
            }
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #0048AA;
.main {
    width: 100vw; height: 100vh; display: flex; user-select: none;
}
.left {
    width: 250px; background: #0048AA;
}
.right {
    flex: 1;
}
.tbody {
    height: calc(100vh - 60px); background: #F4F8FF; overflow: auto;
}
.el-menu {
    border-right: none !important;
}

.header {
    height: 60px; background: #FFFFFF; box-shadow: 0 10px 20px rgba(0,0,0,0.06); position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
}
.nav {
    ul {
        display: flex;
        li {
            text-align: center; min-width: 80px; margin: 0 10px; cursor: pointer;
            a {
                text-decoration: none; color: rgba(0,0,0,0.8);
                span {
                    font-size: 24px; display: block;
                }
            }
            &.active {
                a {
                    color: @themeColor;
                    b {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
.userBox {
    display: flex; align-items: center;
    div {
        margin-right: 10px;
    }
}

</style>
